<template>
  <div class="app-container">
    <!-- 筛选信息开始 -->
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          @click="handleSearchList()"
          type="primary"
          size="small"
        >
          查询结果
        </el-button>
        <el-button
          style="float: right; margin-right: 15px"
          @click="handleResetSearch()"
          size="small"
        >
          重置
        </el-button>
      </div>

      <div style="margin-top: 15px">
        <el-form
          :inline="true"
          :model="listQuery"
          size="small"
          label-width="140px"
        >
          <el-form-item label="演员名字：">
            <el-input
              style="width: 203px"
              v-model="listQuery.name"
              placeholder="演员名字"
            ></el-input>
          </el-form-item>
          <el-form-item label="演员身高（大于）：">
            <el-input
              style="width: 203px"
              v-model="listQuery.height"
              placeholder="演员身高（大于）"
            ></el-input>
          </el-form-item>

          <el-form-item label="演员体重（小于）：">
            <el-input
              style="width: 203px"
              v-model="listQuery.weight"
              placeholder="演员体重（小于）"
            ></el-input>
          </el-form-item>

          <el-form-item label="手机号码：">
            <el-input
              style="width: 203px"
              v-model="listQuery.phone"
              placeholder="手机号码"
            ></el-input>
          </el-form-item>
          <el-form-item label="信息更新起始时间：">
            <el-date-picker
              v-model="listQuery.startTime"
              type="datetime"
              placeholder="信息更新起始时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="00:00:00"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="信息更新结束时间：">
            <el-date-picker
              v-model="listQuery.endTime"
              type="datetime"
              placeholder="信息更新结束时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="24:00:00"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <!-- 筛选信息结束 -->
    <!-- 数据列表开始 -->
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button class="btn-add" @click="handleAddActor()" size="mini">
        添加
      </el-button>
    </el-card>
    <!-- ====================================================================== -->
    <div class="table-container">
      <el-table
        stripe
        ref="productTable"
        :data="list"
        style="width: 100%"
        @selection-change="cellClickHandle"
        v-loading="listLoading"
        border
      >
        <!-- 展开行开始 -->
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="生日">
                <span>{{ props.row.birthday }}</span>
              </el-form-item>
              <el-form-item label="城市">
                <span>{{ props.row.city }}</span>
              </el-form-item>
              <el-form-item label="身高">
                <span>{{ props.row.height }}</span>
              </el-form-item>
              <el-form-item label="体重">
                <span>{{ props.row.weight }}</span>
              </el-form-item>
              <el-form-item label="三围">
                <span>{{ props.row.size }}</span>
              </el-form-item>
              <el-form-item label="微信">
                <span>{{ props.row.actorSocialInfo.wechat }}</span>
              </el-form-item>
              <el-form-item label="手机">
                <span>{{ props.row.actorSocialInfo.phone }}</span>
              </el-form-item>
              <el-form-item label="邮箱">
                <span>{{ props.row.actorSocialInfo.email }}</span>
              </el-form-item>
              <el-form-item label="创建时间">
                <span>{{ props.row.gmtCreate }}</span>
              </el-form-item>
              <el-form-item label="修改时间">
                <span>{{ props.row.gmtModified }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <!-- 展开行结束 -->
        <el-table-column prop="date" label="序号" width="80px">
          <template slot-scope="scope">
            {{
              (listQuery.pageNum - 1) * listQuery.pageSize + scope.$index + 1
            }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="演员名称"> </el-table-column>
        <el-table-column label="头像" width="150px">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="
                String(scope.row.avatar).startsWith('http')
                  ? `${scope.row.avatar}`
                  : `${BASE_API}${scope.row.avatar}`
              "
              :preview-src-list="
                String(scope.row.avatar).startsWith('http')
                  ? [`${scope.row.avatar}`]
                  : [`${BASE_API}${scope.row.avatar}`]
              "
              fit="cover"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="封面" width="150px">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="
                String(scope.row.cover).startsWith('http')
                  ? `${scope.row.cover}`
                  : `${BASE_API}${scope.row.cover}`
              "
              :preview-src-list="
                String(scope.row.cover).startsWith('http')
                  ? [`${scope.row.cover}`]
                  : [`${BASE_API}${scope.row.cover}`]
              "
              fit="cover"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="constellation" label="星座"> </el-table-column>
        <el-table-column prop="hobby" label="爱好"> </el-table-column>
        <el-table-column prop="occupation" label="职业"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link
              type="primary"
              size="mini"
              icon="el-icon-edit"
              @click="handleUpdateProduct(scope.$index, scope.row)"
              >修改</el-link
            >

            <el-link
              type="danger"
              size="mini"
              icon="el-icon-delete"
              @click="removeDataById(scope.row.id, scope.row.albumName)"
              style="margin-left: 10px"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 数据列表结束 -->
    <!-- 分页条开始 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="listQuery.pageSize"
        :page-sizes="[5, 10, 15]"
        :current-page.sync="listQuery.pageNum"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 分页条结束 -->
  </div>
</template>
<script>
import actor from "@/api/actor";
const defaultListQuery = {
  name: null,
  pageNum: 1,
  pageSize: 5,
  height: null,
  weight: null,
  phone: null,
  startTime: null,
  endTime: null,
};
export default {
  data() {
    return {
      listQuery: Object.assign({}, defaultListQuery),
      listLoading: true,
      list: null,
      total: null,
      BASE_API: this.$VUE_APP_BASE_API,
    };
  },
  created() {
    this.getList();
  },

  methods: {
    getList() {
      this.listLoading = true;
      actor.getActorListPage(this.listQuery).then((res) => {
        this.list = res.data.result;
        this.total = res.data.total;
        this.listLoading = false;
        console.log(this.list);
      });
    },
    handleResetSearch() {
      this.listQuery = Object.assign({}, defaultListQuery);
    },
    handleSearchList() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    handleAddActor() {
      this.$router.push({ path: "/actor/addActor" });
    },

    //单元格选中事件
    cellClickHandle(row, column, cell, $event) {
      // console.log(row)
      //console.log(column)
      // console.log(cell)
      // console.log(event)
      //   if (column.label == "所属专辑") {
      //     console.log(row.album.id);
      //     this.albumPicQuery.albumId = row.album.id;
      //     this.getPicInfo((this.page = 1), this.limit, this.albumPicQuery);
      //   }
    },
    //修改演员
    handleUpdateProduct(index, row) {
      this.$router.push({ path: "/actor/updateActor", query: { id: row.id } });
      console.log(row.id)
    },
    //删除演员
    removeDataById(id) {
      this.$confirm(`此操作将永久删除该文件, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          actor.deleteActorById(id).then((res) => {
            this.$message.success("删除成功");
            this.getList();
          });
        })
        .catch(() => {
          this.$message.info("取消删除"); 
        });
    },
  },
};
</script>
<style scope>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

</style>